<template v-title data-title="订单">
    <div>
        <HeadContainer></HeadContainer>
        <!-- 右侧功能定位 -->
        <div class="user-right">
            <div class="uc-box uc-main-box">
                <div class="uc-content-box order-list-box">
                    <div class="box-hd"><h1 class="title">支付中心</h1></div>
                    <div class="section">
                        <input type="hidden" name="pd_encode" value="">
                        <input type="hidden" name="pd_verify" value="">
                        <input type="hidden" name="aid" value="">
                        <!-- 隐藏 -->
                        <input name="paytype" class="paytypeinp" type="hidden" value="10"/>
                        <!-- 隐藏 End -->
                        <div class="order-detail">
                            <ul>
                                <li class="clearfix">
                                    <div class="label">订单编号：{{order.id}}</div>
                                    <div class="content"></div>
                                </li>
                                <li class="clearfix">
                                    <div class="label">商品编号：{{order.courseId}}</div>
                                    <div class="content"></div>
                                </li>
                                <li class="clearfix">
                                    <div class="label">用户手机：{{order.mobile}}</div>
                                    <div class="content"></div>
                                </li>
                                <li class="clearfix">
                                    <div class="label">下单时间：{{order.createTime}}</div>
                                    <div class="content"></div>
                                </li>
                            </ul>
                        </div>
                        <!-- 支付按钮 -->
                        <div class="summary" style="float:right;">
                            <div class="clearfix total"><span class="label">应付金额：</span><span class="price">{{order.price}}</span>
                            </div>
                            <div class="actions">
                                <button @click="pay" class="button3">立即支付</button>
                            </div>
                        </div>
                        <!-- 支付按钮 End -->
                        <!-- 支付中心 End -->
                    </div>
                </div>
            </div>
        </div>
        <!-- 右侧功能定位 End -->
        <div style="height: 150px"></div>
        <FooterContainer></FooterContainer>
    </div>
</template>
<script>
    import HeadContainer from '@/views/HeadContainer'
    import FooterContainer from '@/views/FooterContainer'
    import order from "@/api/order";

    export default {
        name: "Order",
        components: {HeadContainer, FooterContainer},
        data() {
            return {
                order: {}
            }
        },
        methods: {
            queryOrderById(id) {
                order.queryOrderByIdApi(id).then(data => {
                    this.order = data.data;
                    console.log("订单信息：", this.order);
                })
            },
            pay() {
                order.payApi(this.order.id).then(data => {
                    document.querySelector('body').innerHTML = data.data;
                    //执行submit表单提交，让页面重定向，跳转到支付宝页面
                    document.forms[0].submit();
                }).catch(data => {
                    console.log(data)
                })
            }
        },
        created() {
            if (this.$route.params && this.$route.params.id) {
                this.queryOrderById(this.$route.params.id);
            }
        }
    }
</script>
<style src="@/assets/css/v2_index.css" scoped></style>
<style src="@/assets/css/order.css" scoped></style>